<template>
  <div>
    <a-form-model
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      labelAlign="left"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-row>
        <a-col :span="12">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="姓名" prop="person_name">
                <a-input v-model="formData.person_name" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="性别" prop="person_sex">
                <a-select v-model="formData.person_sex">
                  <a-select-option value="男">男</a-select-option>
                  <a-select-option value="女">女</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="电话">
                <a-input v-model="formData.person_phone" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="工号" prop="person_idcard">
                <a-input v-model="formData.person_idcard" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="入职日期">
                <a-date-picker v-model="formData.person_come_date" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="所属部门" prop="depkey">
                <a-tree-select
                  v-model="formData.depkey"
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="departmentList"
                  allow-clear
                  placeholder="请选择部门"
                  tree-node-filter-prop="label"
                  :replaceFields="{
                    children: 'childs',
                    label: 'dep_name',
                    value: 'pkey',
                  }"
                  @change="depChange"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="工种" prop="work_type">
                <a-select v-model="formData.work_type" placeholder="请选择">
                  <a-select-option v-for="(item, index) in workList" :key="index" :value="item.data_value">{{
                    item.data_name
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="黑名单" prop="is_black_list">
                <a-select v-model="formData.is_black_list">
                  <a-select-option :value="0">离职</a-select-option>
                  <a-select-option :value="1">不是</a-select-option>
                  <a-select-option :value="2">是</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            label="人员相片"
            prop="person_photo"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 20 }"
            style="margin-bottom: 0"
          >
            <a-upload
              list-type="picture-card"
              :show-upload-list="false"
              @preview="handlePreview"
              :before-upload="beforeUpload"
            >
              <img v-if="formData.person_photo" :src="formData.person_photo" alt="avatar" style="width: 100%;height: 100%;" />
              <div v-else>
                <a-icon type="plus" />
                <div class="ant-upload-text">上传</div>
              </div>
            </a-upload>
            <div>请上传清晰正脸照片，照片必须小于250Kb</div>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div class="l-f l-row-c" style="padding-bottom: 20px">
      <a-button @click="handleCancel" class="l-mg-r10">取消</a-button>
      <a-button @click="handleOk" type="primary" >保存</a-button>
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleImgCancel">
      <img alt="example" style="width: 100%" :src="formData.person_photo" />
    </a-modal>
  </div>
</template>
    
<script>
import { getDatadictionary } from '@/api/plan'
import { getDepartmentThreeListApi,editPeopleApi,getPeopleDetailApi } from '@/api/people'
export default {
  data() {
    return {
      isEdit: false,
      pkey: null,
      visible: false,
      confirmLoading: false,
      formData: {
        person_name: '', // 姓名
        person_sex: '', // 性别
        person_phone: '', // 电话
        person_come_date: '', // 入职日期
        person_idcard: '', // 工号
        is_black_list: 1, // 是否是黑名单
        person_photo: '', // 人员相片
        depkey: '', // 所属部门
        work_type: '', // 工种
      },
      rules: {
        person_name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        person_sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        person_phone: [{ required: true, message: '请输入电话', trigger: 'change' }],
        person_idcard: [{ required: true, message: '请输入工号', trigger: 'change' }],
        person_come_date: [{ required: true, message: '请选择入职日期', trigger: 'change' }],
        is_black_list: [{ required: true, message: '请选择是否是黑名单', trigger: 'change' }],
        person_photo: [{ required: true, message: '请上传人员相片', trigger: 'change' }],
        depkey: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
        work_type: [{ required: true, message: '请选择工种', trigger: 'change' }],
      },
      previewVisible: false,
      departmentList: [], // 部门列表
      workList: [], // 工种列表
    }
  },
  methods: {
    add() {
      this.isEdit = false
      this.visible = true
      this.initData()
      this.resetForm()
    },
    edit(pkey) {
      this.isEdit = true
      this.visible = true
      this.pkey = pkey
      this.initData()
      this.getPeopleDetail()
    },
    resetForm() {
      this.formData.person_name = ''
      this.formData.person_sex = ''
      this.formData.person_phone = ''
      this.formData.birthday = ''
      this.formData.person_idcard = ''
      this.formData.is_black_list = 1
      this.formData.person_photo = ''
      this.formData.depkey = ''
      this.formData.work_type = ''
    },
    initData() {
      this.getWorkList()
      this.getDepartmentThreeList()
    },
    dateChange(date) {
      this.formData.startDate = date[0]
      this.formData.endDate = date[1]
    },
    handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true
          let formObj = { ...this.formData}
          if (this.isEdit) {
            formObj.pkey = this.pkey
          }
          const { statusCode, errors } = await editPeopleApi(formObj)
          this.confirmLoading = false
          if (statusCode == 200) {
            this.visible = false
            this.$message.success('保存成功！')
            this.$emit('saveSuccess')
            this.resetForm()
            this.$parent.getTableData()
          } else {
            this.$message.error(errors)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.$parent.isShowForm = false
    },
    handleImgCancel() {
      this.previewVisible = false
    },
    async handlePreview() {
      this.previewVisible = true
    },
    async beforeUpload(file) {
      if (file.size > 250 * 1024) {
        this.$message.error('上传大小不能超过 250KB!')
      } else {
        this.formData.person_photo = await this.getBase64(file)
      }
      return false
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = (error) => reject(error)
      })
    },
    // 获取详情
    async getPeopleDetail() {
      const {data} = await getPeopleDetailApi({
        pkey: this.pkey
      })
      this.formData.person_name = data.person_name
      this.formData.person_sex = data.person_sex
      this.formData.person_phone = data.person_phone
      this.formData.person_come_date = data.person_come_date
      this.formData.person_idcard = data.person_idcard
      this.formData.is_black_list = data.is_black_list
      this.formData.person_photo = data.person_photo ? 'data:image/jpeg;base64,' + data.person_photo : ''
      this.formData.depkey = data.depkey
      this.formData.work_type = data.work_type
      console.log(data)
    },
    // 获取部门列表
    async getDepartmentThreeList() {
      const { data } = await getDepartmentThreeListApi()
      this.departmentList = data
    },
    // 获取工种列表
    async getWorkList() {
      const { data } = await getDatadictionary({ data_type: 3, department_id: this.formData.depkey })
      this.workList = data
    },
    depChange() {
      this.getWorkList()
    },
  },
}
</script>
<style lang="less" scoped>
</style>